<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人中心 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3B7ADB;
            --primary-light: #EBF2FF;
            --secondary: #FF5A5F;
            --success: #2ECC71;
            --warning: #FFC107;
            --dark: #2C3E50;
            --gray: #7F8C8D;
            --light-gray: #F5F7FA;
            --border: #E1E4E8;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-gray);
            color: var(--dark);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--dark);
            font-size: 20px;
        }
        
        /* 个人资料头部 */
        .profile-header {
            background: linear-gradient(135deg, var(--primary), #5D9CEC);
            color: white;
            padding: 20px 16px 30px;
        }
        
        .profile-main {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }
        
        .avatar-container {
            position: relative;
        }
        
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
        }
        
        .verify-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 24px;
            height: 24px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--primary);
        }
        
        .verify-icon {
            color: var(--primary);
            font-size: 14px;
        }
        
        .edit-profile {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 6px 16px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .profile-info {
            margin-bottom: 16px;
        }
        
        .profile-name {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        
        .profile-bio {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 8px;
        }
        
        .profile-stats {
            display: flex;
            gap: 24px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 2px;
        }
        
        .stat-label {
            font-size: 12px;
            opacity: 0.8;
        }
        
        /* 功能菜单区 */
        .function-menu {
            background-color: white;
            border-radius: 12px;
            margin: -15px 16px 16px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        
        .menu-row {
            display: flex;
            border-bottom: 1px solid var(--border);
        }
        
        .menu-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16px 0;
            text-decoration: none;
            color: var(--dark);
        }
        
        .menu-item:last-child {
            border-right: none;
        }
        
        .menu-icon {
            font-size: 20px;
            margin-bottom: 6px;
            color: var(--primary);
        }
        
        .menu-label {
            font-size: 13px;
            font-weight: 500;
        }
        
        /* 内容区域 */
        .content-section {
            background-color: white;
            border-radius: 12px;
            margin-bottom: 16px;
            overflow: hidden;
        }
        
        .section-container {
            padding: 0 16px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .section-title {
            font-size: 17px;
            font-weight: 600;
        }
        
        .section-action {
            color: var(--primary);
            font-size: 14px;
            text-decoration: none;
        }
        
        /* 个人设置列表 */
        .settings-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .settings-item:last-child {
            border-bottom: none;
        }
        
        .setting-link {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--dark);
            flex: 1;
        }
        
        .setting-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--primary);
        }
        
        .setting-name {
            font-size: 16px;
        }
        
        .setting-desc {
            font-size: 14px;
            color: var(--gray);
            margin-left: 36px;
        }
        
        .setting-arrow {
            color: var(--gray);
            font-size: 16px;
        }
        
        .badge {
            background-color: var(--primary-light);
            color: var(--primary);
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
        }
        
        /* 我的内容预览 */
        .content-preview {
            padding: 16px 0;
        }
        
        .posts-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }
        
        .post-item {
            aspect-ratio: 1/1;
            position: relative;
            overflow: hidden;
            border-radius: 4px;
        }
        
        .post-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .post-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            font-weight: 500;
        }
        
        /* 会员信息卡片 */
        .vip-card {
            padding: 16px;
            background: linear-gradient(135deg, #7B61FF, #5B47C2);
            border-radius: 10px;
            color: white;
            margin-bottom: 16px;
        }
        
        .vip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .vip-title {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .vip-expiry {
            font-size: 13px;
            opacity: 0.9;
            margin-bottom: 8px;
        }
        
        .vip-benefits {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .vip-benefit {
            font-size: 12px;
            background-color: rgba(255,255,255,0.2);
            padding: 3px 10px;
            border-radius: 10px;
        }
        
        .vip-action {
            display: block;
            width: 100%;
            background-color: white;
            color: #7B61FF;
            border: none;
            border-radius: 20px;
            padding: 8px 0;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border);
            z-index: 1000;
        }
        
        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: var(--gray);
            text-decoration: none;
            font-size: 10px;
            flex: 1;
        }
        
        .bottom-nav-item.active {
            color: var(--primary);
        }
        
        .bottom-nav-icon {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">个人中心</div>
        <button class="nav-btn">
            <i class="fas fa-cog"></i>
        </button>
    </div>
    
    <!-- 个人资料头部 -->
    <div class="profile-header">
        <div class="profile-main">
            <div class="avatar-container">
                <img src="https://picsum.photos/id/64/200/200" alt="个人头像" class="profile-avatar">
                <div class="verify-badge">
                    <i class="fas fa-check verify-icon"></i>
                </div>
            </div>
            <button class="edit-profile">
                <i class="fas fa-user-edit"></i> 编辑资料
            </button>
        </div>
        
        <div class="profile-info">
            <div class="profile-name">张小明</div>
            <div class="profile-bio">热爱生活的旅行摄影师 | 环球旅行家</div>
            <div class="profile-stats">
                <div class="stat-item">
                    <div class="stat-value">248</div>
                    <div class="stat-label">关注</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">1.2k</div>
                    <div class="stat-label">粉丝</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">368</div>
                    <div class="stat-label">动态</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">54</div>
                    <div class="stat-label">收藏</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 功能菜单区 -->
    <div class="function-menu">
        <div class="menu-row">
            <a href="#" class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-image"></i>
                </div>
                <div class="menu-label">我的相册</div>
            </a>
            <a href="#" class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-star"></i>
                </div>
                <div class="menu-label">我的收藏</div>
            </a>
            <a href="#" class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-award"></i>
                </div>
                <div class="menu-label">我的成就</div>
            </a>
            <a href="#" class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-qrcode"></i>
                </div>
                <div class="menu-label">我的二维码</div>
            </a>
        </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="section-container">
        <!-- 会员信息 -->
        <div class="content-section">
            <div class="section-header">
                <div class="section-title">会员中心</div>
                <a href="#" class="section-action">查看全部</a>
            </div>
            <div class="vip-card">
                <div class="vip-header">
                    <div class="vip-title">
                        <i class="fas fa-crown"></i> 高级会员
                    </div>
                    <span class="badge">年付省钱</span>
                </div>
                <div class="vip-expiry">会员有效期至 2024年12月31日</div>
                <div class="vip-benefits">
                    <span class="vip-benefit">无广告</span>
                    <span class="vip-benefit">10GB空间</span>
                    <span class="vip-benefit">专属客服</span>
                </div>
                <button class="vip-action">续费会员</button>
            </div>
        </div>
        
        <!-- 我的内容预览 -->
        <div class="content-section">
            <div class="section-header">
                <div class="section-title">我的内容</div>
                <a href="#" class="section-action">查看全部</a>
            </div>
            <div class="content-preview">
                <div class="posts-grid">
                    <div class="post-item">
                        <img src="https://picsum.photos/id/1039/300/300" alt="我的动态" class="post-image">
                    </div>
                    <div class="post-item">
                        <img src="https://picsum.photos/id/1043/300/300" alt="我的动态" class="post-image">
                    </div>
                    <div class="post-item">
                        <img src="https://picsum.photos/id/1036/300/300" alt="我的动态" class="post-image">
                    </div>
                    <div class="post-item">
                        <img src="https://picsum.photos/id/1029/300/300" alt="我的动态" class="post-image">
                    </div>
                    <div class="post-item">
                        <img src="https://picsum.photos/id/1035/300/300" alt="我的动态" class="post-image">
                    </div>
                    <div class="post-item">
                        <img src="https://picsum.photos/id/1037/300/300" alt="我的动态" class="post-image">
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 账户设置 -->
        <div class="content-section">
            <div class="section-header">
                <div class="section-title">账户设置</div>
            </div>
            <ul class="settings-list">
                <li class="settings-item">
                    <a href="#" class="setting-link">
                        <div class="setting-icon">
                            <i class="fas fa-id-card"></i>
                        </div>
                        <div class="setting-name">个人资料</div>
                    </a>
                    <i class="fas fa-chevron-right setting-arrow"></i>
                </li>
                <li class="settings-item">
                    <a href="#" class="setting-link">
                        <div class="setting-icon">
                            <i class="fas fa-lock"></i>
                        </div>
                        <div class="setting-name">隐私设置</div>
                    </a>
                    <i class="fas fa-chevron-right setting-arrow"></i>
                </li>
                <li class="settings-item">
                    <a href="#" class="setting-link">
                        <div class="setting-icon">
                            <i class="fas fa-bell"></i>
                        </div>
                        <div class="setting-name">通知设置</div>
                    </a>
                    <i class="fas fa-chevron-right setting-arrow"></i>
                </li>
                <li class="settings-item">
                    <a href="#" class="setting-link">
                        <div class="setting-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="setting-name">账号安全</div>
                    </a>
                    <i class="fas fa-chevron-right setting-arrow"></i>
                </li>
            </ul>
        </div>
        
        <!-- 帮助与支持 -->
        <div class="content-section">
            <div class="section-header">
                <div class="section-title">帮助与支持</div>
            </div>
            <ul class="settings-list">
                <li class="settings-item">
                    <a href="#" class="setting-link">
                        <div class="setting-icon">
                            <i class="fas fa-question-circle"></i>
                        </div>
                        <div class="setting-name">帮助中心</div>
                    </a>
                    <i class="fas fa-chevron-right setting-arrow"></i>
                </li>
                <li class="settings-item">
                    <a href="#" class="setting-link">
                        <div class="setting-icon">
                            <i class="fas fa-comment-dots"></i>
                        </div>
                        <div class="setting-name">联系客服</div>
                    </a>
                    <span class="badge">会员专线</span>
                </li>
                <li class="settings-item">
                    <a href="#" class="setting-link">
                        <div class="setting-icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="setting-name">举报反馈</div>
                    </a>
                    <i class="fas fa-chevron-right setting-arrow"></i>
                </li>
                <li class="settings-item">
                    <a href="#" class="setting-link">
                        <div class="setting-icon">
                            <i class="fas fa-sign-out-alt"></i>
                        </div>
                        <div class="setting-name">退出登录</div>
                    </a>
                    <i class="fas fa-chevron-right setting-arrow"></i>
                </li>
            </ul>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="bottom-nav-item">
            <div class="bottom-nav-icon">
                <i class="fas fa-home"></i>
            </div>
            <div class="bottom-nav-label">首页</div>
        </a>
        <a href="#" class="bottom-nav-item">
            <div class="bottom-nav-icon">
                <i class="fas fa-compass"></i>
            </div>
            <div class="bottom-nav-label">发现</div>
        </a>
        <a href="#" class="bottom-nav-item">
            <div class="bottom-nav-icon" style="width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary); color: white; display: flex; align-items: center; justify-content: center; margin-top: -15px;">
                <i class="fas fa-plus"></i>
            </div>
        </a>
        <a href="#" class="bottom-nav-item">
            <div class="bottom-nav-icon">
                <i class="far fa-bell"></i>
            </div>
            <div class="bottom-nav-label">通知</div>
        </a>
        <a href="#" class="bottom-nav-item active">
            <div class="bottom-nav-icon">
                <i class="far fa-user"></i>
            </div>
            <div class="bottom-nav-label">我的</div>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 底部导航切换
        const bottomNavItems = document.querySelectorAll('.bottom-nav-item');
        bottomNavItems.forEach(item => {
            if (!item.querySelector('.fas-plus')) { // 排除中间的发布按钮
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有激活状态
                    bottomNavItems.forEach(i => i.classList.remove('active'));
                    
                    // 添加当前激活状态
                    this.classList.add('active');
                });
            }
        });
        
        // 编辑资料按钮点击
        document.querySelector('.edit-profile').addEventListener('click', function() {
            alert('进入资料编辑页面');
        });
        
        // 设置按钮点击
        document.querySelector('.top-nav .fas-cog').parentElement.addEventListener('click', function() {
            alert('打开全局设置页面');
        });
        
        // 返回按钮点击
        document.querySelector('.top-nav .fas-arrow-left').parentElement.addEventListener('click', function() {
            alert('返回上一页');
        });
        
        // 发布按钮点击
        document.querySelector('.bottom-nav-icon .fas-plus').parentElement.addEventListener('click', function() {
            alert('打开发布选项：发布动态、上传图片、发起活动...');
        });
        
        // 设置项点击事件
        const settingLinks = document.querySelectorAll('.setting-link');
        settingLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const settingName = this.querySelector('.setting-name').textContent;
                alert(`进入${settingName}页面`);
            });
        });
        
        // 功能菜单点击事件
        const menuItems = document.querySelectorAll('.menu-item');
        menuItems.forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const menuName = this.querySelector('.menu-label').textContent;
                alert(`进入${menuName}页面`);
            });
        });
        
        // 会员相关按钮点击
        document.querySelector('.vip-action').addEventListener('click', function() {
            alert('打开会员续费页面');
        });
        
        document.querySelector('.section-action').addEventListener('click', function(e) {
            e.preventDefault();
            alert('打开会员中心全部内容');
        });
    </script>
</body>
</html>
